﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/echarts.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ReportManage/PerPie.css"))
}
<div class="container-div" id="OEE-vue">
    <!-- 条件选择区 -->
    <div>
        <el-row>
            <el-col :span="24">
                <el-date-picker v-model="timeValue"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
                <el-button style="margin-left: 20px"
                           type="info"
                           icon="el-icon-search"
                           circle="" v-on:click="search()"></el-button>
            </el-col>
        </el-row>
    </div>
    <!-- 上部 -->
    <div style="margin-top:20px">
        <el-row :gutter="20">
            <el-col :span="12">
                <!-- 上左 机床状态柱状图 -->
                <div id="char1" style="height:200px"></div>
            </el-col>
            <el-col :span="12">
                <!-- 上右 设备故障填写率 -->
                <div id="char2" style="height:200px">
                    <div id="line-state-PerPie">
                        <div id="line-state-PerPie-proportion">
                            <span class="tipsPer">当前故障填写率</span>
                            <el-progress class="perSta" type="circle" :percentage="percentage"></el-progress>
                        </div>
                        <div id="line-state-PerPie-distribute" style="width:500px"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 下1 故障填写信息 -->
    @*<div></div>*@
    <!-- 下2 OEE详细信息 -->
    <!--
        OEE=时间开动率
        时间开动率=当天24小时运行时间/8
        -->
    <div style="margin-top:20px">
        <!-- 时间选择 -->
        <div>
            <el-row>
                <el-col>
                    <el-date-picker v-model="oeeTime"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    :picker-options="pickerOptions"></el-date-picker>
                    <el-button style="margin-left: 20px"
                               type="info"
                               icon="el-icon-search"
                               circle="" v-on:click="searchOEE()"></el-button>
                </el-col>
            </el-row>
            <div id="oeeChart" style="height:360px;width:90%"></div>
        </div>
    </div>
</div>

<script>
    let myColor1 = ["#d9d6c3", "#606266", "#90EE90", "#fccb05", "#FFC0CB"];
    let option1 = {
        backgroundColor: "#fff",
        grid: {
            top: 10,
            bottom: 10,
            left: "10%",
            right: "15%"
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                show: true,
                data: ["断开", "停止", "加工", '等待', '报警'],
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                show: true,
                inverse: true,
                data: [1767, 58, 4441, 0, 169550],
                axisLabel: {
                    textStyle: {
                        fontSize: 12
                    },
                    formatter: function (value, index) {
                        return value + " 分钟";
                    }
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: [8, 0, 2,0,96],
                barWidth: 20,
                itemStyle: {
                    normal: {
                        barBorderRadius: 25,
                        color: function (params) {
                            var num = myColor1.length;
                            return myColor1[params.dataIndex % num];
                        }
                    }
                },
                label: {
                    normal: {
                        fontSize: 10,
                        show: true,
                        position: "right",
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barGap: "-100%",
                data: [100, 100, 100,100,100],
                barWidth: 25,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "rgba(0,193,222,0.5)",
                        borderWidth: 2,
                        barBorderRadius: 15
                    }
                }
            }
        ]
    };
    let option2 = {
        backgroundColor: "#fff",
        title: {
            text: "当前故障统计",
            textStyle: {
                fontSize: 14,
                fontWeight: "normal"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}：{c}次 ({d}%)"
        },
        legend: {
            show: true,
            type: "scroll",
            orient: "horizontal",
            left: 20,
            bottom: 0,
            data: ["计划内", "计划外", "程序因素", "其它"]
        },
        series: [
            {
                name: "当前故障统计",
                type: "pie",
                radius: "80%",
                center: ["50%", "45%"],
                data: [
                    { name: "计划内", value: 4 },
                    { name: "计划外", value: 7 },
                    { name: "程序因素", value: 8 },
                    { name: "其它", value: 3 }
                ],
                label: {
                    show: true,
                    position: "inside",
                    fontSize: 10,
                    formatter: "{d}%"
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                }
            }
        ]
    };
    let option3 = {
        title: {
            text: "设备OEE数据"
        },
        legend: {
            data: ["产线", "机床1", "机床2","机床3"]
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: true },
                saveAsImage: {}
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: true,
            data: [
                "0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00",
                "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00",
                "22:00", "23:00", "0:00",
            ]
        },
        yAxis: {
            type: "value",
            scale: true,
            name: "单位：%"
        },
        series: [
            {
                name: "产线",
                type: "line",
                tooltip: {
                    trigger: "axis",
                    formatter: "{c}"
                },
                data: []
            },
            {
                name: "机床1",
                type: "line",
                tooltip: {
                    trigger: "axis",
                    formatter: "{c}"
                },
                data: []
            },
            {
                name: "机床2",
                type: "line",
                tooltip: {
                    trigger: "axis",
                    formatter: "{c}"
                },
                data: []
            },
            {
                name: "机床3",
                type: "line",
                tooltip: {
                    trigger: "axis",
                    formatter: "{c}"
                },
                data: []
            },
        ],
        color: [
            "rgba(251,229,162,0.85)",
            "rgba(93,112,146,0.85)",
            "rgba(90,216,166,0.85)",
            "#FFC0CB"
        ]
    }
    let app = new Vue({
        el: '#OEE-vue',
        data: {
            timeValue: null,
            mychart1: null,
            mychart2: null,
            mychart3: null,
            deviceCode: "Lathe01",
            searchStart: null,
            searchEnd: null,
            percentage: 25,
            oeeTime: new Date(),
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
        },
        methods: {
            // 条件搜索
            search() {
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                this.searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                this.searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/ReportManage/ReportApi/resOeeReq")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode,
                        stime: this.searchStart,
                        etime: this.searchEnd
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.timeDistribution != null) {
                        option1.yAxis[1].data = res.data.timeDistribution;
                        for (let i = 0; i < res.data.timeDistribution.length; i++) {
                            option1.series[0].data[i] = ((res.data.timeDistribution[i] / res.data.timeTotal).toFixed(2)) * 100
                        }
                    }
                    this.mychart1.setOption(option1);
                    if (res.data.recordNum != null) {
                        let _recordNum = 0;
                        for (let i = 0; i < res.data.recordNum.length; i++) {
                            _recordNum += res.data.recordNum[i];
                        }
                        this.percentage = parseInt(((_recordNum / res.data.recordTotal) * 100).toFixed(2))
                        option2.series[0].data = [
                            { name: "计划内", value: res.data.recordNum[0] },
                            { name: "计划外", value: res.data.recordNum[1] },
                            { name: "程序因素", value: res.data.recordNum[2] },
                            { name: "其它", value: res.data.recordNum[3] }
                        ]
                    }
                    this.mychart2.setOption(option2);
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！获取数据失败：' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 查询设备OEE
            searchOEE() {

            }
        },
        filters: {
        },
        mounted() {
            this.mychart1 = echarts.init(document.getElementById("char1"));
            this.mychart1.setOption(option1);

            this.mychart2 = echarts.init(document.getElementById("line-state-PerPie-distribute"));
            this.mychart2.setOption(option2);

            this.mychart3 = echarts.init(document.getElementById("oeeChart"));
            this.mychart3.setOption(option3);
        }
    })
</script>

